<template>
    <content-title name="Button" describe="按钮">
        <content-card name="按钮类型">
            <view class="style-content">
                <l-button style="margin-right: 50rpx">默认</l-button>
                <l-button type="success" style="margin-right: 50rpx">成功</l-button>
                <l-button type="error">错误</l-button>
                <l-button type="warning">警告</l-button>
            </view>
            <view class="style-content">
                <l-button plain style="margin-right: 50rpx">默认</l-button>
                <l-button plain type="success" style="margin-right: 50rpx"> 成功</l-button>
                <l-button plain type="error">错误</l-button>
                <l-button plain type="warning">警告</l-button>
            </view>
        </content-card>

        <content-card name="按钮形状">
            <view class="content">
                <l-button shape="circle">圆弧按钮</l-button>

                <l-button shape="square">方形按钮</l-button>

                <l-button shape="semicircle">半圆按钮</l-button>
            </view>
        </content-card>

        <content-card name="按钮大小" :cardPadding="false">
            <view class="content">
                <l-button size="mini" style="margin-left: 10rpx">小按钮</l-button>
            </view>
            <view class="content">
                <l-button size="medium" style="margin-left: 10rpx">中按钮</l-button>
            </view>
            <view class="content">
                <l-button size="large" style="margin-left: 10rpx">大按钮</l-button>
            </view>
        </content-card>

        <content-card name="通栏按钮" :cardPadding="false">
            <l-button size="long">通栏按钮</l-button>
        </content-card>

        <content-card name="镂空按钮">
            <view class="content">
                <l-button plain size="large">默认</l-button>
            </view>
            <view class="content">
                <l-button plain type="success" size="large">成功</l-button>
            </view>
            <view class="content">
                <l-button plain type="error" size="large">错误</l-button>
            </view>
            <view class="content">
                <l-button plain type="warning" size="large">警告</l-button>
            </view>
        </content-card>

        <content-card name="图标按钮">
            <view class="content">
                <l-button icon="warning" size="large" icon-color="#fff" icon-size="32">图标按钮</l-button>
            </view>
        </content-card>

        <content-card name="禁用">
            <view class="content">
                <l-button disabled size="large">禁用按钮</l-button>
            </view>
        </content-card>

        <content-card name="加载中">
            <view class="content">
                <l-button loading size="large">加载中</l-button>
            </view>
            <view class="content">
                <l-button plain loading type="success" size="large">加载中</l-button>
            </view>
        </content-card>

        <content-card name="特殊用法">
            <view class="content-con">
                <view class="content">
                    <l-button special open-type="share">
                        <view class="share-box">
                            <l-icon size="40" name="share" color="#3963bc" />
                        </view>
                    </l-button>
                </view>
                <view class="content">
                    <l-button special openType="contact">
                        <view class="box">
                            <l-icon size="40" name="customer-service" color="#3963bc" />
                            <text class="txt" style="margin-left: 20rpx">客服</text>
                        </view>
                    </l-button>
                </view>
                <view class="content">
                    <l-button special openType="getUserInfo" bind:getuserinfo="getUserInfo">
                        <view class="box">
                            <text class="txt">设置</text>
                        </view>
                    </l-button>
                </view>
            </view>
        </content-card>
    </content-title>
</template>

<script>
export default {}
</script>

<style scoped>
.content {
  margin-bottom: 20rpx;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: flex-start;
  /* line-height: 92rpx */
}

.test-img{
  height: 50rpx;
  width: 50rpx;
}

.style-content {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: flex-start;
  height: 200rpx;
}

.txt {
  color: #3963bc;
  font-size: 28rpx;
}

.remark {
  color: #8a8a8a;
  font-size: 28rpx;
  margin-right: 10rpx;
}

.content-con {
  display: flex;
  height: 80rpx;
  flex-direction: row;
  justify-content: space-between;
}

.box {
  width: 140rpx;
  height: 80rpx;
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
}

.share-box {
  width: 80rpx;
  height: 80rpx;
  display: flex;
  justify-content: center;
  align-items: center;
  border-radius: 50%;
  box-shadow: 0px 1px 8px 0px rgba(220, 220, 220, 0.5);
}

.btn {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0 12rpx;
  box-sizing: border-box;
  height: 72rpx;
  width: 180rpx;
  font-size: 28rpx;
  background-color: #fff;
  color: #34bfa3;
  border: 2rpx solid #34bfa3;
  border-radius: 9.6rpx;
  margin-bottom: 20rpx;
}

.con{
  display: flex;
  flex-direction: column;
  align-items: center;
}
</style>